<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" @open="handleOpen" @close="handleClose" append-to-body>
    <section class="caseInfo">
      <section>
        <el-collapse-transition>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ title }}</span>
            </div>
            <div class="text item">
              <template v-if="caseDetail">
                <section v-show="app" class="command__detail__wrapper">
                  <section class="case__detail_container">
                    <el-row>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件号
                            </section>
                            <section class="content">{{ caseDetail.evtCode }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              违法、违规信息
                            </section>
                            <section class="content">{{ caseDetail.violationName }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件地点
                            </section>
                            <section class="content">{{caseDetail.evtAddress}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              举报时间
                            </section>
                            <section class="content">{{caseDetail.reporterTime}}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件内容
                            </section>
                            <section class="content">{{caseDetail.evtContent}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                  </section>
                </section>
                <section v-show="user" class="command__detail__wrapper">
                  <section class="case__detail_container">
                    <el-row>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              求救人
                            </section>
                            <section class="content">{{ caseDetail.cryName }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              求救时间
                            </section>
                            <section class="content">{{caseDetail.cryTime}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              报警内容
                            </section>
                            <section class="content">{{caseDetail.cryContent}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                  </section>
                </section>
                <section v-show="judge" class="command__detail__wrapper">
                  <section class="case__detail_container">
                    <el-row>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              预警等级
                            </section>
                            <section class="content">{{ caseDetail.alarmLevelName }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              预警时间
                            </section>
                            <section class="content">{{caseDetail.alarmTime}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              预警类型
                            </section>
                            <section class="content">{{ judgeAlarmTypeFormat(caseDetail.alarmType) }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              预警信息
                            </section>
                            <section class="content">{{caseDetail.alarmMessage}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              异常人员姓名
                            </section>
                            <section class="content">{{ caseDetail.name }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              异常人员身份证号
                            </section>
                            <section class="content">{{caseDetail.idcard}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                  </section>
                </section>
                <section v-show="fisher" class="command__detail__wrapper">
                  <section class="case__detail_container">
                    <el-row>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              报警类别
                            </section>
                            <section class="content">{{ stateTypeFormat(caseDetail.stateType) }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="12">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              报警时间
                            </section>
                            <section class="content">{{caseDetail.dateTime}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <section class="detail__item_container">
                      <section class="item_info_container">
                        <section class="item_info_container_title">
                          <div class="dian"></div>
                          报警内容
                        </section>
                        <section class="content">{{caseDetail.content}}</section>
                      </section>
                    </section>
                  </section>
                </section>
                <section v-show="travel" class="command__detail__wrapper">
                  <section class="case__detail_container">
                    <el-row>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件号
                            </section>
                            <section class="content">{{ caseDetail.evtCode }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              违法、违规信息
                            </section>
                            <section class="content">{{ caseDetail.violationName }}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件地点
                            </section>
                            <section class="content">{{caseDetail.evtAddress}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              举报时间
                            </section>
                            <section class="content">{{caseDetail.reporterTime}}</section>
                          </section>
                        </section>
                      </el-col>
                      <el-col :span="24">
                        <section class="detail__item_container">
                          <section class="item_info_container">
                            <section class="item_info_container_title">
                              <div class="dian"></div>
                              案件内容
                            </section>
                            <section class="content">{{caseDetail.evtContent}}</section>
                          </section>
                        </section>
                      </el-col>
                    </el-row>
                  </section>
                </section>
              </template>
            </div>
          </el-card>
        </el-collapse-transition>
      </section>
    </section>
  </el-dialog>
</template>

<script>
  export default {
    name: 'infoBox',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      detail: {
        type: Object,
        default: () => {
          return {}
        }
      },
      showWhat: {
        type: String,
        default: ''
      }
    },
    watch: {
      detail: {
        handler(val) {
          this.caseDetail = this.detail.item
          switch (this.detail.target) {
            case 'app':
              this.app = true
              this.title= '案件上报详情'
              break
            case 'user':
              this.user = true
              this.title= '群众举报详情'
              break
            case 'judge':
              this.judge = true
              this.title= '研判报警详情'
              break
            case 'fisher':
              this.fisher = true
              this.title= '渔船报警详情'
              break
            case 'travel':
              this.travel = true
              this.title= '旅游报警详情'
              break
          }
        }
      },
      showWhat: {
        handler(val) {
        }
      }
    },
    data() {
      return {
        title:'',
        caseDetail: {},
        detailLoading: false,
        app: false,
        user: false,
        judge: false,
        fisher: false,
        travel:false,
        judgeAlarmTypeOptions: [],
        stateTypeOptions:[]
      }
    },
    created() {
      this.getDicts('judge_alarm_type').then(response => {
        this.judgeAlarmTypeOptions = response.data
      })
      this.getDicts('alarm_state_type').then(response => {
        this.stateTypeOptions = response.data
      })
    },
    methods: {
      handleClose() {
        this.app = false
        this.help = false
        this.judge = false
        this.deploy = false
        this.$emit('closeDialog', 'detail')
      },
      handleOpen(){
      },
      judgeAlarmTypeFormat(e) {
        return this.selectDictLabel(this.judgeAlarmTypeOptions, e)
      },
      stateTypeFormat(e) {
        return this.selectDictLabel(this.stateTypeOptions, e)
      },
    }
  }
</script>

<style scoped lang="scss">
  @import '../style/main';
</style>
